<template>
  <div class="form-container">
    <el-card class="form-card" shadow="hover">
      <h2 class="form-title">提供医馆信息</h2>

      <el-form :model="form" ref="formRef" label-width="140px" :rules="rules" label-position="left">

        <!-- 左列 -->
        <el-row :gutter="30">
          <el-col :span="12" :xs="24" :sm="12">
            <el-form-item label="*医馆名称" prop="clinicName">
              <el-input v-model="form.clinicName" placeholder="请输入医馆名称" clearable />
            </el-form-item>

            <el-form-item label="大夫名称" prop="doctorName">
              <el-input v-model="form.doctorName" placeholder="请输入大夫名称" clearable />
            </el-form-item>

            <el-form-item label="*省市区" prop="address">
              <el-cascader
                  v-model="selectedOptions"
                  :options="cityOptions"
                  @change="handleChange"
                  placeholder="请选择省市区"
                  style="width: 100%"
                  clearable
              ></el-cascader>
            </el-form-item>

            <el-form-item label="*擅长主治" prop="specialty">
              <el-select v-model="form.specialty" placeholder="请选择擅长主治" style="width: 100%">
                <el-option
                    v-for="item in specialtyOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 右列 -->
          <el-col :span="12" :xs="24" :sm="12">
            <el-form-item label="详细地址" prop="detailedAddress">
              <el-input v-model="form.detailedAddress" placeholder="请输入详细地址" clearable>
                <i slot="suffix" class="el-icon-location-information map-icon" @click="openMap"></i>
              </el-input>
            </el-form-item>

            <el-form-item label="备注说明" prop="remarks">
              <el-input type="textarea" :rows="5" v-model="form.remarks" placeholder="请在此处填写备注(比如专门治疗什么病症,病症的症状有哪些,该备注关系到医馆查询的症状是否准确)" maxlength="200" show-word-limit></el-input>
              <div class="note-box">
                <p><strong>备注：</strong>自身案例，花费价格，治疗方式等，费用必须写清楚，否则审核不通过。</p>
                <p style="color: red;"><strong>注意：</strong>医疗纠纷，一经发现，责任自负！</p>
              </div>
            </el-form-item>

            <!-- 文件上传 -->
            <el-form-item label="上传执照（可选）">
              <el-upload
                  action="#"
                  list-type="picture-card"
                  :auto-upload="false"
                  :limit="1"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="执照预览">
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 按钮组 -->
        <div class="form-footer">
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="submitForm">提交审核</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import cityData from '../assets/cityData';

export default {
  name: 'MedicalClinicForm',
  data() {
    return {
      form: {
        clinicName: '',
        doctorName: '',
        detailedAddress: '', // 新增字段用于存储详细地址
        address: '',
        specialty: '',
        remarks: ''
      },
      selectedOptions: [], // 存储用户选择的省市区选项
      cityOptions: cityData,
      dialogImageUrl: '',
      dialogVisible: false,
      specialtyOptions: [
        { value: '内科', label: '内科' },
        { value: '外科', label: '外科' },
        { value: '中医', label: '中医' },
        { value: '儿科', label: '儿科' }
      ],
      rules: {
        clinicName: [{ required: true, message: '请输入医馆名称', trigger: 'blur' }],
        doctorName: [
          { required: true, message: '请输入大夫名称', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]{2,10}$/, message: '请输入2-10个汉字的大夫名称', trigger: 'blur' }
        ],
        address: [{ required: true, message: '请选择省市区', trigger: 'change' }],
        specialty: [{ required: true, message: '请选择擅长主治', trigger: 'change' }]
      }
    };
  },
  methods: {
    async submitForm() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          if (!this.selectedOptions.length) {
            this.$message.error('请选择省市区');
            return;
          }
          if (!this.form.detailedAddress.trim()) {
            this.$message.error('请填写详细地址');
            return;
          }

          // 构造请求数据
          const payload = {
            clinicName: this.form.clinicName,
            doctorName: this.form.doctorName,
            address: this.selectedOptions,  // [省份, 城市, 区县]
            detailedAddress: this.form.detailedAddress,
            specialty: this.form.specialty,
            remarks: this.form.remarks
          };

          try {
            const res = await this.$axios.post('/api/admin/clinics', payload);
            this.$message.success(res.data.message || '提交成功');
            this.resetForm();
          } catch (error) {
            console.error('提交失败:', error);
            this.$message.error('提交失败，请稍后再试');
          }
        } else {
          this.$message.error('请检查表单内容');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.formRef.resetFields();
    },
    handleRemove(file) {
      console.log('文件移除:', file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    openMap() {
      this.$router.push({ name: 'MapSelector' }).then(() => {
        this.$notify.info({
          title: '地图选择',
          message: '即将跳转地图选择页面'
        });
      });
    },
    handleChange(value) {
      this.form.address = value.join(', '); // 将选择的省市区拼接成字符串保存
    }
  },
  watch: {
    '$route'(to, from) {
      if (to.name === 'MedicalClinicForm' && to.query.address) {
        this.form.detailedAddress = to.query.address;
      }
    }
  }
};
</script>


<style scoped>
.form-container {
  background: linear-gradient(135deg, #e8f5e9, #f3e5f5);
  min-height: 100vh;
  padding: 60px 20px;
}

.form-card {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.form-card:hover {
  transform: translateY(-5px);
}

.form-title {
  text-align: center;
  color: #333;
  font-weight: 600;
  margin-bottom: 30px;
  font-size: 28px;
}

.el-form-item__label {
  font-weight: 600;
  color: #444;
}

.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner {
  border-radius: 8px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #78c2ad;
  box-shadow: 0 0 5px rgba(120, 194, 173, 0.3);
}

.map-icon {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  color: #888;
  transition: color 0.3s;
}

.map-icon:hover {
  color: #78c2ad;
}

.note-box {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}

.note-box p {
  margin-bottom: 5px;
}

.note-box strong {
  color: #303133;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
}

.el-button--primary {
  background-color: #78c2ad;
  border-color: #78c2ad;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.el-button--primary:hover {
  background-color: #6ab79c;
  border-color: #6ab79c;
  transform: translateY(-2px);
}
</style>